<template>
    <div>
        <div class="top" @click.stop="showPlayer=true" v-if="sxy" ref="top">
            <img :src="list[i].pic" alt="" style="border-radius:50%;" />
            <p class="van-ellipsis" style="color:#000;font-size:16px;">{{list[i].txt}} - <span style="font-size:12px;color:#666;">{{list[i].name}}</span></p>
            <p style="color:#000">
                <van-icon @click.stop="playAll" size="24" v-if="lxx" name="play-circle-o" />
                <van-icon @click.stop="pause" size="24" v-if="flag" name="pause-circle-o" />
                <audio @error="onError" @ended="nextSong" @canplay="contTime" ref="audio" :src="list[i].url"></audio>
            </p>
            <div class="volume">
                <p style="color:#000;font-size:20px;">
                <van-icon @click.stop="volumeFlag=!volumeFlag" name="volume-o" />
                </p>
                <div v-show="volumeFlag" :style="{ height: '80px' }" class="volume-item">
                <van-slider v-model="value" button-size="18px" active-color='#e5e5e5' inactive-color="#1989fa" vertical @change="onChange" />
                </div>
            </div>
            <p style="color:#666">
                <van-icon @click.stop="show=true" size="24" name="orders-o" />
            </p>
        </div>
        <van-popup v-model="show" round position="bottom" :style="{ height: '60%',width:'92%',marginLeft:'4%',color:'#666', }">
            <myPlay :list="list" :changeSong="changeSong" :current="current" :deleteAll="deleteAll" :changeI='changeI' :delOne="delOne" :play="play"></myPlay>
        </van-popup>
        <van-popup v-model="showPlayer" close-icon-position="top-left" close-icon="arrow-down" closeable position="bottom" :style="{ height: '100%'}">
            <allPlayer :duration="duration" :currentTime="currentTime" :tuoDong="tuoDong" :playAll="playAll" :prevSong="prevSong" :nextSong="nextSong" :changeSong="changeSong" :current="current" :deleteAll="deleteAll" :changeI='changeI' :delOne="delOne" :play="play" :pause='pause' :list="list" :i="i" :flag="flag" :lxx="lxx"></allPlayer>
        </van-popup>
    </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";
import { Toast } from 'vant';

export default {
  data() {
    return {
      value: 50,
      show: false,
      flag:false,
      lxx:true,
      listId:0,
      musicId:0,
      volumeFlag:false,
      currentTime: "",
      duration: "",
    };
  },
  computed: {
        ...mapState(['sxy','volume','playerBtm','first','stop']),
        showPlayer:{
          get(){
            return this.$store.state.showPlayer;
          },
          set(v){
            this.$store.commit('setShowPlayer',v)
          }
        },
        timer:{
          get(){
            return this.$store.state.timer;
          },
          set(v){
            this.$store.commit('setTimer',v)
          }
        },
        current:{
          get(){
            return this.$store.state.current;
          },
          set(v){
            this.$store.commit('setCurrent',v)
          }
        },
        i:{
          get(){
            return this.$store.state.i;
          },
          set(v){
            this.$store.commit('setI',v)
          }
        },
        list:{
          get(){
            return this.$store.state.list;
          },
          set(v){
            this.$store.commit('setI',v)
          }
        },
        progress:{
            get(){
                return this.$store.state.progress;
            },
            set(v){
                this.$store.commit('setProgress',v)
            }
        },
  },
  methods:{
    ...mapMutations(['setSxy','setVolume','setPlayerBtm','setFirst','setShowList']),
    changeProgress() {
      clearInterval(this.timer);
      let musicMp3 = this.$refs.audio;
      this.timer = setInterval(() => {
        let numbers = musicMp3.currentTime / musicMp3.duration;
        let perNumber = (numbers * 100).toFixed(2);
        if (perNumber >= 100) {
          this.isStore = true;
          this.progress = 0;
          clearInterval(this.timer);
        }
        let miao = parseInt(Number(musicMp3.currentTime)) % 60;
        let fen = parseInt(parseInt(Number(musicMp3.currentTime)) / 60);
        if (Number(fen) > 9) {
          fen = fen + ":";
        } else {
          fen = "0" + fen + ":";
        }
        if (Number(miao) > 9) {
          miao = miao;
        } else {
          miao = "0" + miao;
        }
        this.currentTime = fen + miao;
        this.progress = Number(perNumber);
      }, 1000);
    },
    tuoDong(value) {
      let audio = this.$refs.audio;
      let num = parseInt(audio.duration * (value / 100));
      audio.currentTime = audio.duration * (value / 100);
      this.progress = value;
      clearInterval(this.timer);
      this.changeProgress();
    },
    contTime() {
      this.$nextTick(()=>{
        let miao = parseInt(Number(this.$refs.audio.duration)) % 60;
        let fen = parseInt(parseInt(Number(this.$refs.audio.duration)) / 60);
        if (Number(fen) > 9) {
          fen = fen + ":";
        } else {
          fen = "0" + fen + ":";
        }
        if (Number(miao) > 9) {
          miao = miao;
        } else {
          miao = "0" + miao;
        }
        this.duration = fen + miao;
      })
    },
    onChange(value) {
      Toast('当前音量：' + (100-value));
      this.setVolume((100-value)/100);
    },
    onError(){
      this.$dialog.alert({ message: '加载失败' });
      setTimeout(()=>{
        this.$dialog.close()
        this.nextSong()
      },1000)
      this.lxx = true;
      this.flag = false;
    },
    playAll(){
      clearInterval(this.timer);
      if(!this.list[this.current].url){
          this.pause();
          this.$dialog.alert({ message: '暂无版权' });
          setTimeout(()=>{
            this.$dialog.close()
            this.nextSong()
          },1000)
          this.lxx = true;
          this.flag = false;
        }else{
          this.$nextTick(()=>{
            this.play()
          })
        }
    },
    play(){
      if(!this.stop){
        clearInterval(this.timer);
        this.changeProgress();
        this.lxx = false;
        this.flag = true;
        this.show = false;
        this.$nextTick(()=>{
          this.$refs.audio.play();
        })
      }
    },
    pause(){
      clearInterval(this.timer);
      this.$refs.audio.pause();
      this.lxx = true;
      this.flag = false;
    },
    nextSong(){
      this.i=(this.list.length==1||this.i==this.list.length-1)?0:this.i+1;
      this.current=(this.list.length==1||this.current==this.list.length-1)?0:this.current+1;
      if(this.current==0){
        this.$nextTick(()=>{
          this.$refs.audio.load();
          this.playAll();
          clearInterval(this.timer);
          this.changeProgress();
          this.contTime()
        })
      }
    },
    prevSong(){
      this.i=this.list.length==1?0:this.i==0?this.list.length-1:this.i-1;
      this.current=this.list.length==1?0:this.current==0?this.list.length-1:this.current-1;
      if(this.current==0){
        this.$nextTick(()=>{
          this.$refs.audio.load();
          this.playAll();
          clearInterval(this.timer);
          this.changeProgress();
          this.contTime()
        })
      }
    },
    changeSong(i){
      this.current = i;
    },
    changeI(i){
      this.i = i;
      this.$nextTick(()=>{
        this.playAll();
      })
    },
    delOne(i){
      this.list.splice(i,1);
      if(this.list.length == 1){
        this.i = 0;
      }
      if(this.list.length<=0){
        this.setShowList(false);
        this.show = false;
        this.showPlayer = false;
        this.setSxy(false);  
        this.setFirst(true);
        this.setPlayerBtm(0);
        this.current = 0;
        this.i = 0;
      }
    },
    deleteAll(){
      this.list.splice(0,this.list.length);
      this.setSxy(false);
      this.setShowList(false);
      this.show = false;
      this.showPlayer = false;
      this.setPlayerBtm(0);
      this.setFirst(true);
      this.current = 0;
      this.i = 0;
    },
  },
  mounted(){
    if(this.list.length>0){
        this.$refs.audio.volume = this.volume;
        this.$refs.top.style.bottom = this.playerBtm;
    }
  },
  watch:{
    stop:function(v){
      if(v){
        this.pause();''
      }
    },
    list:function(v){
      if(this.list.length>0){
        this.$nextTick(()=>{
          this.$refs.audio.volume = this.volume;
          this.$refs.top.style.bottom = this.playerBtm;
          this.current=v.length>this.current?this.current:0;
          if(this.current != 0){
              if(this.first){
                this.setFirst(false);
              }else{
                this.changeI(this.current);
              }
          }else{
            this.playAll();
          }
        })
      }
    },
    sxy:function(v){
      if(!v){
        clearInterval(this.timer);
      }
    },
    current:function(v){
      this.$nextTick(()=>{
        this.changeI(v);
      })
    },
    volume:function(v){
      if(this.$refs.audio){
        this.$refs.audio.volume = v;
      }
    },
    playerBtm:function(v){
      if(this.$refs.top){
        this.$refs.top.style.bottom = v;
      }
    }
  }
};

</script>

<style lang="scss" scoped>
.van-ellipsis{
  width: 40%;
}
.top{
    position: fixed;
    z-index: 1000;
    left: 0;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    padding:0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    img{
        width: 45px;
        height: 45px;
    }
}
.volume{
  position: relative;
  &-item{
    position: absolute;
    top: -88px;
    left: 50%;
    transform: translate(-50%);
    z-index: 1000;
  }
}

</style>